<template>
	<view class="slQRcode" v-if="segmentedList.length>0">
		<u-sticky>
			<!-- tab切换 -->
			<u-tabs :list="segmentedList" :is-scroll="true" :bold="true" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<!-- 内容 -->
		<view>
			<view v-if="currentList" class="content">
				<view class="content-item" v-for="(item, index) in currentList" :key="index">
					<image mode="aspectFit" class="qrcodeImg-gzh" v-if="item.isGzh" src="../../../static/gzh.png"
						@click="jumpGzh(item)" />
					<image mode="aspectFit" class="qrcodeImg" v-else :src="item.imgUrl" />
					<view class="qrcodeTitle oneLine">{{ item.name }}</view>
				</view>
			</view>
			<view v-else class="kztStyle">
				<view class="xflSelectView">
					<xfl-select :list="segmentedList" :clearable="false" :showItemNum="5"
						:style_Container="'height: 80rpx; font-size: 16px;'" placeholder="请选择要上传的二维码所属项目"
						:initValue="segmentedList[0].value" @change="changeSelect" :selectHideType="'hideAll'">
					</xfl-select>
					<input class="qrcodeInput" placeholder="请输入二维码名称" type="text" v-model="qrcodeName" />
					<input class="qrcodeInput" placeholder="请输入操作密码" type="text" v-model="root" />
				</view>
				<image v-if="qrcodeUrl" mode="aspectFit" class="uploadQrcodeImg" :src="qrcodeUrl"></image>
				<view v-if="qrcodeUrl" class="qrcodeUrlStyle">{{ qrcodeUrl }}</view>
				<view class="uploadBtn" @click="uploadQrcode">上传二维码</view>
				<view @click="uploadJson">上传云服务</view>
			</view>
		</view>
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';

	export default {
		components: {
			xflSelect
		},
		data() {
			return {
				list: [],
				current: 0,
				gzhIcon: 'http://www.33lc.com/uploadfile/2017/0708/20170708104857169.jpg',
				segmentedList: [],
				// 数据源
				tabList: [],
				// 当前展示的列表
				currentList: [],
				// 当前操作的二维码、index、名称、连接
				qrcodeIdx: 0,
				qrcodeName: '',
				qrcodeUrl: '',
				// 密码权限
				root: ''
			};
		},
		onShow() {
			console.log('进来了__onShow');
		},
		onLoad() {
			this.getSlQRcodeData();
		},
		methods: {
			/**
			 * 获取数据源
			 * */
			getSlQRcodeData() {
				var self = this;
				uniCloud.callFunction({
					name: 'getSlQrcodeFile',
					success: res => {
						self.segmentedList = res.result.data[0].list.map(el => {
							return {
								name: el.title
							}
						})
						self.tabList = res.result.data[0].list;
						self.currentList = self.tabList[0].list;
					}
				});
			},

			/**
			 * 上传二维码
			 * 1.选择图片
			 * 2.获取图片链接
			 * */
			uploadQrcode() {
				var self = this;
				if (!this.qrcodeName || this.qrcodeName.length > 13) {
					return uni.showToast({
						icon: 'none',
						title: '请输入二维码名称,长度不超过13个字符'
					});
				}

				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res, '______chooseImage');
						let fileType = 'jpg';
						if (res.tempFiles[0].name.indexOf('.') != -1) {
							let arr = res.tempFiles[0].name.split('.')
							fileType = arr[arr.length - 1]
						} else if (res.tempFiles[0].type.indexOf('/') != -1) {
							let arr = res.tempFiles[0].name.split('/')
							fileType = arr[arr.length - 1]
						}

						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0];
							let t = new Date().getTime();
							// promise
							async function abc() {
								const result = await uniCloud.uploadFile({
									filePath: filePath,
									cloudPath: `slqrcode/${self.qrcodeName}${t}.${fileType}`
								});
								// 7a68-zhj1214-525887-1302318805/1591271708716.jpg
								// https://7a68-zhj1214-525887-1302318805.tcb.qcloud.la/1591271708716.jpg
								console.log(result, '___图片id');
								self.getQrcodeUrl(result.fileID);
							}
							abc();
						}
					}
				});
			},
			/**
			 * 获取图片外链
			 * */
			getQrcodeUrl(id) {
				var self = this;
				uniCloud.getTempFileURL({
					fileList: [id],
					success(res) {
						console.log(res);
						let p = res.fileList[0];
						if (p.code == 'SUCCESS') {
							console.log(p);
							self.qrcodeUrl = p.download_url;
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '获取连接失败',
							duration: 3000
						});
					}
				});
			},
			/**
			 * 下拉框变化
			 * */

			changeSelect(e) {
				this.qrcodeIdx = e.index;
			},
			/**
			 * 修改云数据库数据
			 * */
			uploadJson() {
				if (!this.qrcodeUrl || !this.qrcodeName) {
					return uni.showToast({
						icon: 'none',
						title: '请完善二维码信息'
					});
				}
				if (!this.root || this.root != '1214') {
					return uni.showToast({
						icon: 'none',
						title: '抱歉，您无操作权限'
					});
				}

				var self = this;
				uniCloud.callFunction({
					name: 'updateSlqrData',
					data: {
						tabIdx: self.qrcodeIdx,
						qrcode: {
							imgUrl: self.qrcodeUrl,
							name: self.qrcodeName
						}
					},
					success: res => {
						if (res.result.code == 10000) {
							uni.showToast({
								icon: 'success',
								title: '更新成功',
								duration: 3000
							});
							this.getSlQRcodeData();
						} else {
							let msg = res.result.msg || '更新失败';
							uni.showToast({
								icon: 'none',
								title: msg,
								duration: 3000
							});
						}
					}
				});
			},
			/**
			 * 公众号跳转
			 * */
			jumpGzh(val) {
				window.location.href = val.imgUrl;
			},
			/**
			 * 切换tab
			 * */
			change(index) {
				this.current = index;

				if (this.tabList[index]) this.currentList = this.tabList[index].list;
			},
			/**
			 * 删除二维码
			 * */
			deleteQrcode() {
				uni.showToast({
					icon: 'none',
					title: '敬请期待',
					duration: 3000
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.slQRcode {
		background-color: #f3f3f3;
		height: 100vh;
		overflow: scroll;

		.content {
			display: flex;
			align-content: center;
			flex-wrap: wrap;
			justify-content: space-around;

			.content-item {
				margin: 10px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.qrcodeImg {
					width: 45vw;
					height: 45vw;
				}

				.qrcodeImg-gzh {
					width: 66px;
					height: 66px;
					overflow: hidden;
				}

				.qrcodeTitle {
					width: 45vw;
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
					line-height: 52px;
					text-align: center;
				}
			}
		}

		.kztStyle {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;

			.xflSelectView {
				width: 80%;
				margin: auto;
				margin-top: 44rpx;
			}

			.qrcodeInput {
				height: 80rpx;
				margin: 24rpx 0px;
				border: 1px solid #9b9b9b;
				border-radius: 8rpx;
			}

			.uploadQrcodeImg {
				object-fit: contain;
				height: 80vw;
			}

			.uploadBtn {
				height: 80rpx;
				width: 40vw;
				margin: 16rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 4rpx;
				font-weight: 600;
				background-color: #07c160;
				color: white;
			}

			.qrcodeUrlStyle {
				font-size: 11px;
				margin: 16rpx;
			}
		}
	}

	.oneLine {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
